<template>
	<view class="classify">
		<view class="classify-ul">
			<view class="classify-top">
				<view class="classify-ol">
					<view class="classify-li">
						<image src="../../static/image/icon-sysj.png" mode=""></image>
						<view class="font-cliss">
							<text>靠谱商家</text>
						</view>
					</view>
					<view class="font-text" @click="merchant">
						<text>查看更多 ></text>
					</view>
				</view>
				<view class="kefu">
					<image src="../../static/image/index-kefu.png" mode="" @click="kefu"></image>
				</view>
			</view>
			<view class="classify-center">
				<view class="classify-center-li" v-for="(item,index) in classify">
					<view class="li-top" :class="item.image ? 'background-white' : '' ">
						<text>{{item.if}}</text>
						<image :src=" '/static/image/' + item.image + '.jpg' " mode=""></image>
					</view>
					<view class="li-bottom">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classify: [{
						image: "11",
						name: "待定",
						if: ""
					},
					{
						image: "11",
						name: "待定",
						if: "空位招租"
					},
					{
						image: "11",
						name: "待定",
						if: "空位招租"
					},
					{
						image: "",
						name: "待定",
						if: "空位招租"
					},
					{
						image: "",
						name: "待定",
						if: "空位招租"
					},
					{
						image: "",
						name: "待定",
						if: "空位招租"
					},

				]
			}
		},
		methods: {
			kefu() {
				uni.navigateTo({
					url: '../../pages/public/service'
				})
			},
			merchant() {
				uni.switchTab({
					url: '../../pages/merchant/merchant'
				})
			}
		},

	}
</script>

<style lang="less" scoped>
	.classify {
		margin: 45rpx 30rpx;

		.classify-ul {
			width: 700rpx;
			margin: 0 auto;

			.classify-top {
				display: flex;
				justify-content: space-between;

				.classify-ol {
					display: flex;
					align-items: center;

					.classify-li {
						background-image: url(../../static/image/icon-syzs.png);
						background-repeat: no-repeat;
						background-size: 224rpx 24rpx;
						display: flex;
						background-position: bottom;

						image {
							width: 40rpx;
							height: 30rpx;
							padding: 10rpx 30rpx 0 0;
						}

						.font-cliss {
							text {
								display: block;
								font-size: 37rpx;
								font-family: HYLingXinJ;
								font-weight: bold;
								color: #333333;
							}
						}
					}

					.font-text {
						padding: 0rpx 0rpx 0rpx 30rpx;
						display: block;
						height: 50rpx;
						display: flex;
						align-items: center;

						text {
							display: block;
							margin-top: 5rpx;
							font-size: 21rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #666666;
						}
					}
				}

				.kefu {
					image {
						display: block;
						width: 80rpx;
						height: 80rpx;
						margin-top: -35rpx;
					}
				}

			}

			.classify-center {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;

				.classify-center-li {
					width: 209rpx;
					height: 296rpx;
					margin: 40rpx 10rpx;
					border-radius: 13px 13px 13px 13px;
					background: #FFFFFF;
					box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.16);

					.li-top {
						width: 209rpx;
						height: 221rpx;
						background: #DDDDDD;
						text-align: center;
						line-height: 221rpx;
						border-radius: 13px 13px 0px 0px;
						position: relative;

						image {
							width: 209rpx;
							height: 221rpx;
						}

						text {
							width: 209rpx;
							position: absolute;
							font-size: 32rpx;
							font-family: zcoolwenyiti;
							font-weight: 500;
							color: #333333;
						}
					}

					.background-white {
						background-color: #ffffff;
						border: 1px solid #DDDDDD;
					}

					.li-bottom {
						width: 209rpx;
						height: 75rpx;
						text-align: center;
						line-height: 75rpx;

						text {
							font-size: 29rpx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #333333;
						}

					}
				}
			}
		}
	}
</style>
